<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
    xmlns:t="http://myfaces.apache.org/tomahawk"
	xmlns:h="http://java.sun.com/jsf/html">

<h:head>
	<title>JSF 2.0 SongReader</title>
    <h:outputStylesheet library="css" name="table-style.css"  />
    <h:outputStylesheet library="css" name="mainpage-style.css"/>
</h:head>
<h:body>
    <h:panelGroup styleClass="container">
    <h:panelGroup styleClass="upload">
    <h:form>
    	<h4>Welcome, #{helloBean.name}</h4>
    </h:form>

    <h:form id="upload" enctype="multipart/form-data">
        <t:inputFileUpload value="#{uploadBean.uploadedFile}" />
        <h:commandButton value="Upload" action="#{uploadBean.submit}" />
        <h:messages />
    </h:form>
    <h:outputText value="#{songsBean.message}"/>
    </h:panelGroup>
    <h:panelGroup rendered="#{songsBean.message eq 'Document in Process'}">

        <h:dataTable value="#{songsBean.songs}" var="item"
                     styleClass="order-table"
                     headerClass="order-table-header"
                     rowClasses="order-table-odd-row,order-table-even-row"
                     rendered="#{not empty songsBean.songs}">
            <h:column>
                <!-- column header -->
                <f:facet name="header">Name</f:facet>
                <!-- row record -->
                #{item.name}
            </h:column>
            <h:column>
                <f:facet name="header">Author</f:facet>
                #{item.author}
            </h:column>
            <h:column>
                <f:facet name="header">Genres</f:facet>
                #{item.genres}
            </h:column>
            <h:column>
                <f:facet name="header">Year</f:facet>
                #{item.year}
            </h:column>
        </h:dataTable>
        </h:panelGroup>

<h:panelGroup styleClass="controls" rendered="#{not empty songsBean.songs}">
    <h:panelGroup styleClass="sort">
        <h:outputText value="No Songs" rendered="#{empty songsBean.songs}"/>
        <h:form id="controls">
            <h:selectOneRadio id="selectedItem" value="#{songsBean.sortMode}" required="true" layout="pageDirection">
                <f:selectItems value="#{songsBean.availableSortModes}"/>
            </h:selectOneRadio>
            <h:message for="selectedItem"/>
            <h:commandButton value="Sort File" action="#{songsBean.doSort}" />
        </h:form>
    </h:panelGroup>
    <h:panelGroup styleClass="filter">
        <h:form id="filter">
            <h3>Search Form</h3>
            <h:panelGroup styleClass="name">
        <h:outputLabel value="Name:"/>
        <h:inputText value="#{songsBean.filterSong.name}"/>
            </h:panelGroup>
            <h:panelGroup styleClass="author">
        <h:outputLabel value="Author:"/>
        <h:inputText value="#{songsBean.filterSong.author}"/>
            </h:panelGroup>
            <h:panelGroup styleClass="genre">
        <h:outputLabel value="Genre:"/>
        <h:inputText value="#{songsBean.filterSong.genres}"/>
            </h:panelGroup>
            <h:panelGroup styleClass="year">
        <h:outputLabel value="Year:"/>
        <h:inputText value="#{songsBean.filterSong.year}"/>
            </h:panelGroup>
        <h:commandButton value="Search" action="#{songsBean.doSearch}"/>
        <h:commandButton value="Reset" action="#{songsBean.initSongProcessor}"/>
        <h:commandButton value="Clear" action="#{songsBean.clearFilter}"/>

       </h:form>
    </h:panelGroup>
    <h:panelGroup styleClass="download">
        <h:form id="download">
            <h:commandButton value="Download" action="#{downloadBean.download}"/>
        </h:form>
    </h:panelGroup>
    </h:panelGroup>
    </h:panelGroup>
</h:body>
</html>